<template>
	<div class="basic-upplier-container">
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
			<TableSearch :search="tb.tableData.search" @search="onSearch" />
		</el-card>

		<el-card class="full-table" shadow="hover" style="margin-top: 8px">
			<Table ref="tableRef" v-bind="tb.tableData" :getData="getData" :exportChangeData="exportChangeData" @sortHeader="onSortHeader" @selectionChange="tableSelection">
				<template #command>
					<el-button type="primary" icon="ele-Plus" @click="openAddConfig" v-auth="'supplier:add'"> 新增 </el-button>
					<el-button v-if="state.selectlist.length > 0" type="danger" icon="ele-Delete" @click="bacthDelete" v-auth="'supplier:delete'"> 批量删除 </el-button>
				</template>
				<template #usable="scope">
					<el-tag v-if="scope.row.usable == 1"> 正常 </el-tag>
					<el-tag type="danger" v-else> 禁用 </el-tag>
				</template>
				<template #action="scope">
					<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditConfig(scope.row)" v-auth="'supplier:edit'"> 编辑 </el-button>
					<el-dropdown>
						<el-button icon="ele-MoreFilled" size="small" text type="primary" style="padding-left: 12px" />
						<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item icon="ele-Delete" @click="delConfig(scope.row)"  v-auth="'supplier:delete'">删除</el-dropdown-item> 
						<el-dropdown-item icon="ele-TurnOff" @click="disableClick(scope.row)" v-auth="'supplier:edit'">禁用</el-dropdown-item> 
						</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
			</Table>
		</el-card> 

		<EditForm ref="editFormRef" :title="state.editFormTitle" @updateData="updateData" />
	</div>
</template>

<script lang="ts" setup name="supplier">
import { onMounted, reactive, ref, defineAsyncComponent, nextTick } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction'; 
import { ArrowDown } from '@element-plus/icons-vue';
import { getAPI } from '/@/utils/axios-utils';
import { SupplierApi } from '/@/api-services/api';
import { Supplier } from '/@/api-services/models';
import { fa } from 'element-plus/es/locale';

// 引入组件
import EditForm from '/@/views/basic/supplier/component/edit.vue'
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));
const tableRef = ref<RefType>();
const editFormRef = ref<InstanceType<typeof EditForm>>();

const state = reactive({
	editFormTitle: '',
	selectlist: [] as EmptyObjectType[],
	groupList: [] as Array<String>,
});

const tb = reactive<TableDemoState>({
	tableData: {
		// 表头内容（必传，注意格式）
		columns: [
			{ prop: 'supplyName', width: 200, label: '供应商名称', align: 'left', toolTip: true, sortable: 'custom', isCheck: true },
			{ prop: 'supplyCNName',label: '中文名称', align: 'left', isCheck: true },
			{ prop: 'contacts', width: 120, label: '联系人', align: 'left', isCheck: true },
			{ prop: 'duty', width: 80, label: '职务', align: 'left', sortable: 'custom', isCheck: true },
			{ prop: 'tel', width: 130, label: '电话', align: 'left', sortable: 'custom', isCheck: true },
			{ prop: 'grade', width: 60, label: '等级', align: '', headerAlign: 'left', showOverflowTooltip: true, isCheck: true },
			{ prop: 'address', width:120, label: '地址', align: '', headerAlign: 'left', showOverflowTooltip: true, isCheck: true },
			{ prop: 'bankName', width:120, label: '开户行', align: '', headerAlign: 'left', showOverflowTooltip: true, isCheck: true },
			{ prop: 'bankAccount', width:120, label: '银行账号', align: '', headerAlign: 'left', showOverflowTooltip: true, isCheck: true },
			{ prop: 'usable', width: 60, label: '状态', align: '', headerAlign: 'left', showOverflowTooltip: true, isCheck: true },
			{ prop: 'action', width:110, label: '操作', type: 'action', align: 'left', isCheck: true, fixed: 'right', hideCheck: true },
		],
		// 配置项（必传）
		config: {
			isStripe: false, // 是否显示表格斑马纹
			isBorder: true, // 是否显示表格边框
			isSerialNo: true, // 是否显示表格序号
			isSelection: true, // 是否勾选表格多选 
			showSelection:true, //是否显示表格多选
			pageSize: 10, // 每页条数
			hideExport: false, //是否隐藏导出按钮 
			hidePrint:false,//是否隐藏打印按钮
			exportFileName: '供应商', //导出报表的文件名，不填写取应用名称
		},
		// 搜索表单，动态生成（传空数组时，将不显示搜索，type有3种类型：input,date,select）
		search: [
			{ label: '供应商名称', prop: 'supplyName', placeholder: '搜索供应商名称', required: false, type: 'input' },
			{ label: '联系人', prop: 'contacts', placeholder: '搜索联系人', required: false, type: 'input' },
			// { label: '创建时间', prop: 'time', placeholder: '请选择', required: false, type: 'date' },
		],
		param: {},
		defaultSort: {
			prop: 'supplyName',
			order: 'ascending',
		},
		customPrintFun:function(_param:any,_data:any){
			console.log(_param);
			console.log(_data);
			ElMessage.success('准备打印数据'+JSON.stringify(_data));
		}
	},
});

// 更新数据
const updateData = () => {
	tableRef.value.handleList(); 
};

const getData = (param: any) => { 
	return getAPI(SupplierApi)
		.apiSupplierListGet(param)
		.then((res) => {
			return res.data;
		});
};
const exportChangeData = (data: Array<EmptyObjectType>) => {
	data.forEach((item) => {
		item.usable = item.usable == 1 ? '可用' : '禁用';
	});
	return data;
};
// 拖动显示列排序回调
const onSortHeader = (data: object[]) => {
	tb.tableData.columns = data;
};
// 搜索点击时表单回调
const onSearch = (data: EmptyObjectType) => {
	tb.tableData.param = Object.assign({}, tb.tableData.param, { ...data });
	nextTick(() => {
		tableRef.value.pageReset();
	});
};
 
//表格多选事件
const tableSelection = (data: EmptyArrayType[]) => { 
	console.log('============================');
	console.log(data); 
};

onMounted(async () => {
	//初始化加载
});

// 打开新增页面
const openAddConfig = () => {
	state.editFormTitle = '添加供应商';
	editFormRef.value?.openDialog({ sysFlag: 2 });
};

// 打开编辑页面
const openEditConfig = (row: any) => {
	state.editFormTitle = '编辑供应商';
	editFormRef.value?.openDialog(row);
};

// 删除
const delConfig = (row: any) => {
	ElMessageBox.confirm(`确定删除供应商：【${row.supplyName}】?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
	.then(async () => { 
		await getAPI(SupplierApi).apiSupplierDeletePost({ id: row.id });
		tableRef.value.handleList();
		ElMessage.success('删除成功');
	})
	.catch(() => {});
};
//禁用事件
const disableClick= (row: any) => {
	ElMessage.success('禁用处理....');
};

//批量删除
const bacthDelete = () => {
	ElMessage.error('暂不支持!!!');
};
</script>
<style scoped>
	.example-showcase.el-dropdown {
		margin-left: 15px;
	}
	.example-showcase .el-dropdown-link {
		cursor: pointer;
		color: var(--el-color-primary);
		display: flex;
		align-items: center;
	}
</style>